<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>绑定我的车辆</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
    <link rel="stylesheet" href="assets/css/ready.css">
    <link rel="stylesheet" href="assets/css/demo.css">
    <link rel="stylesheet" href="assets/layer/layer/theme/default/layer.css">
    <script src="angularjs/angular.min.js"></script>
</head>
<style type="text/css">
    .main-panel {
        background-color: #FFFFFF !important;
    }
    .content {
        background-color: #FFFFFF !important;
    }
</style>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="wrapper">
    <div class="main-header">
        <div class="logo-header">
            <a href="index.html" class="logo">
                <img src="../homePage/img/logo.png" style="height: 40px;width: 100px">个人中心
            </a>
            <button class="navbar-toggler sidenav-toggler ml-auto" type="button" data-toggle="collapse" data-target="collapse"
                    aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <button class="topbar-toggler more"><i class="la la-ellipsis-v"></i></button>
        </div>
        <nav class="navbar navbar-header navbar-expand-lg">
            <div class="container-fluid">
                <a href="../homePage/index.html" style="color: #000000; font-size: 16px;">返回首页</a>

                <ul class="navbar-nav topbar-nav ml-md-auto align-items-center">


                    <li class="nav-item dropdown">
                        当前用户:
                        <a class="dropdown-toggle profile-pic" data-toggle="dropdown" href="#" aria-expanded="false">
                            <span id="username">{{username}}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <div class="user-box">

                                    <div class="u-text">
                                        <p class="text-muted">hello@themekita.com</p>
                                        <a onclick="quiet()" class="btn btn-rounded btn-danger btn-sm">退出登录</a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                        <!-- /.dropdown-user -->
                    </li>
                </ul>
            </div>
        </nav>
    </div>
    <div class="sidebar">
        <div class="scrollbar-inner sidebar-wrapper">
            <div class="user">
                <div class="info">
                    <a class="" data-toggle="collapse" href="#collapseExample" aria-expanded="true">
								<span>

									<span class="user-level">修改信息</span>
                                    <!-- <span class="badge badge-count">未实名</span> -->
									<span class="caret"></span>
								</span>
                    </a>
                    <div class="clearfix"></div>

                    <div class="collapse in" id="collapseExample" aria-expanded="true" style="">
                        <ul class="nav">
                            <li>
                                <a href="password.html">
                                    <span class="link-collapse">修改密码</span>
                                </a>
                            </li>
                            <li>
                                <a href="authentication.html">
                                    <span class="link-collapse">实名认证</span>
                                </a>
                            </li>
                            <li>
                                <a href="update.html">
                                    <span class="link-collapse">编辑资料</span>
                                </a>
                            </li>
                            <li>
                                <a href="gobindcar.html">
                                    <span class="link-collapse">绑定车辆</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <ul class="nav">
                <li class="nav-item">
                    <a href="home.html">
                        <i class="la la-fonticons"></i>
                        <p>首页管理</p>
                        <!-- <span class="badge badge-count">5</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="myOrder.html">
                        <i class="la la-dashboard"></i>
                        <p>我的订单</p>
                        <!-- <span class="badge badge-count">5</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="guarantee.html">
                        <i class="la la-table"></i>
                        <p>我的保单</p>
                        <!-- <span class="badge badge-count">14</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="claim.html">
                        <i class="la la-keyboard-o"></i>
                        <p>我的理赔</p>
                        <!-- <span class="badge badge-count">50</span> -->
                    </a>
                </li>
                <li class="nav-item">
                    <a href="bindcar.html">
                        <i class="la la-th"></i>
                        <p>我的车辆</p>
                        <!-- <span class="badge badge-count">6</span> -->
                    </a>
                </li>
                <li class="nav-item ">
                    <a href="applyclaim.html">
                        <i class="la la-th"></i>
                        <p>申请理赔</p>
                        <!-- <span class="badge badge-count">6</span> -->
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <h4 class="page-title">绑定车辆</h4>
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header bg-light">
                                <div class="card-title">请输入下列信息来绑定您的车辆</div>
                                <div class="card-category"> 请确保输入的信息真实有效</div>
                            </div>
                            <div class="card-body">
                                <div class="form">
                                    <div class="form-group from-show-notify row">
                                        <div class="col-lg-3 col-md-3 col-sm-12 text-right">
                                            <label>车架号 :</label>
                                        </div>
                                        <div class="col-lg-4 col-md-6 col-sm-12">
                                            <input id="vin" name="vin"class="form-control">
                                        </div>
                                        <div class="col-lg-4 col-md-3 col-sm-12">
                                            <span style="color: red">车架号
                                                分别由17位字母、数字组合而成。包含了生产国家、年代、车型、发动机型号等信息</span>
                                        </div>
                                    </div>
                                    <div class="form-group from-show-notify row">
                                        <div class="col-lg-3 col-md-3 col-sm-12 text-right">
                                            <label>车牌号 :</label>
                                        </div>
                                        <div class="col-lg-4 col-md-6 col-sm-12">
                                            <input id="carnumber" class="form-control">
                                        </div>
                                        <div class="col-lg-4 col-md-3 col-sm-12">
                                            <span style="color: red">车牌号包含省的简称和字母数字组成，如:粤AK2001</span>
                                        </div>
                                    </div>
                                    <div class="form-group from-show-notify row">
                                        <div class="col-lg-3 col-md-3 col-sm-12 text-right">
                                            <label>车型号 :</label>
                                        </div>
                                        <div class="col-lg-4 col-md-6 col-sm-12">
                                            <input id="cartype" class="form-control">
                                        </div>
                                        <div class="col-lg-4 col-md-3 col-sm-12">
                                            <span style="color: red">车型号是生产厂对车的命名:宝马X6</span>
                                        </div>
                                    </div>
                                    <div class="form-group from-show-notify row">
                                        <div class="col-lg-3 col-md-3 col-sm-12 text-right">
                                            <label>提车日期 :</label>
                                        </div>
                                        <div class="col-lg-4 col-md-9 col-sm-12">
                                            <input type="date" class="form-control" id="firstchecktime" name="recorddate"/>
                                        </div>
                                    </div>
                                    <div class="form-group from-show-notify row">
                                        <div class="col-lg-3 col-md-3 col-sm-12 text-right">
                                            <label>车座数 :</label>
                                        </div>
                                        <div class="col-lg-4 col-md-9 col-sm-12">
                                            <select class="form-control input-fixed" id="seatamount">
                                                <option value="2">2</option>
                                                <option value="4">4</option>
                                                <option value="6">6</option>
                                                <option value="7">7</option>
                                                <option value="9">9</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="form">
                                    <div class="form-group from-show-notify row">
                                        <div class="col-lg-3 col-md-3 col-sm-12">

                                        </div>
                                        <div class="col-lg-4 col-md-9 col-sm-12 text-center">
                                            <button id="bindcar" class="btn btn-success">绑定</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container-fluid">
                <nav class="pull-left">
                    <ul class="nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                ThemeKita
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">
                                Help
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#license/#free-item">
                                Licenses
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright ml-auto">
                    Copyright &copy; 2020 无忧车险责任有限公司
                </div>
            </div>
        </footer>
    </div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="modalUpdatePro" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h6 class="modal-title"><i class="la la-frown-o"></i> Under Development</h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <p>Currently the pro version of the <b>Ready Dashboard</b> Bootstrap is in progress development</p>
                <p>
                    <b>We'll let you know when it's done</b></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
</body>
<script src="assets/js/core/jquery.3.2.1.min.js"></script>
<script src="assets/js/plugin/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="assets/js/core/popper.min.js"></script>
<script src="assets/js/core/bootstrap.min.js"></script>
<script src="assets/js/plugin/chartist/chartist.min.js"></script>
<script src="assets/js/plugin/chartist/plugin/chartist-plugin-tooltip.min.js"></script>
<script src="assets/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
<script src="assets/js/plugin/bootstrap-toggle/bootstrap-toggle.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/jquery.mapael.min.js"></script>
<script src="assets/js/plugin/jquery-mapael/maps/world_countries.min.js"></script>
<script src="assets/js/plugin/chart-circle/circles.min.js"></script>
<script src="assets/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
<script src="assets/js/ready.min.js"></script>
<script src="assets/layer/layer/layer.js"></script>
<script>
    var promp=null;
    $('#displayNotif').on('click', function(){
        var placementFrom = $('#notify_placement_from option:selected').val();
        var placementAlign = $('#notify_placement_align option:selected').val();
        var state = $('#notify_state option:selected').val();
        var style = $('#notify_style option:selected').val();
        var content = {};

        content.message = 'Turning standard Bootstrap alerts into "notify" like notifications';
        content.title = 'Bootstrap notify';
        if (style == "withicon") {
            content.icon = 'la la-bell';
        } else {
            content.icon = 'none';
        }
        content.url = 'index.html';
        content.target = '_blank';

        $.notify(content,{
            type: state,
            placement: {
                from: placementFrom,
                align: placementAlign
            },
            time: 1000,
        });
    });
    $(function () {
        var user = sessionStorage.getItem("user");
        var username = JSON.parse(user).username
        $("#username").html(username)
        $("#bindcar").click(function () {
            var user = sessionStorage.getItem("user");
            var userid = JSON.parse(user).userid
            //得到车架号
            var vin = $("#vin").val();
            //得到车牌号
            var carnumber = $("#carnumber").val();
            //得到车型号
            var cartype = $("#cartype").val();
            var firstchecktime = $("#firstchecktime").val();
            var seatamount = $("#seatamount").val();
             //车架号的正则表达式
            var vinexgre=/^[A-HJ-NPR-Z\d]{17}$/;
            //车牌号的正则表达式
            var  carnumberexgre= /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
            if (vin==""||vin==null) {
                promp=layer.msg("车架号不能为空");
            }else if (vinexgre.test(vin)==false) {
                promp=layer.msg("输入的车架号不符合规范");
            }else if (carnumber==""||carnumber==null){
                promp=layer.msg("车牌号不能空");
            } else if (carnumberexgre.test(carnumber)==false) {
                promp=layer.msg("输入的车牌号不符合规范");
            }else if (cartype == "" || cartype == null){
                promp=layer.msg("车型号不能空");
            } else if (firstchecktime==""||firstchecktime==null){
                promp=layer.msg("提车日期不能为空");
            } else if (seatamount==""||seatamount==null){
                promp=layer.msg("车座数不能空");
            }else {
                $.ajax({
                    url: "http://localhost:8002/bindcar/carinfo/" + vin + "/" + carnumber + "/" + cartype + "/" + firstchecktime + "/" + seatamount + "/" + userid,
                    type: "GET",
                    success: function (data) {
                        if (data.code == 200) {
                            window.location.href = "../myCenter/bindcar.html"
                        }else{
                            layer.msg(data.msg, {icon: 5})
                        }
                    }
                })
            }
        })

    })
    function quiet() {
        sessionStorage.clear();
        window.location.href = "../homePage/index.html";
    }
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope, $http) {
        let user = sessionStorage.getItem("user");
        $scope.userid = JSON.parse(user).userid;
        $scope.username = JSON.parse(user).username;

    })
</script>
</html>